<template>
  <div class="orientation">
    <div class="orientation-data">
      <div class="orientation-title">
        <el-input
          size="small"
          placeholder="请输入搜索内容"
          v-model="filterText"
          clearable
        >
        </el-input>
      </div>
      <el-tree
        class="orientation-tree orientation-tree--data"
        show-checkbox
        ref="tree"
        node-key="id"
        :data="treeData"
        :default-checked-keys="defaultCheckedKeys"
        :filter-node-method="filterNode"
        @check="handleTreeCheck"
      >
      </el-tree>
    </div>
    <div class="orientation-selected">
      <div class="orientation-title">
        <div class="orientation-title__label">已选</div>
        <el-button
          v-if="!disabled"
          class="orientation-title__clear"
          size="mini"
          type="text"
          @click="handleTreeClear"
        >全部清空</el-button>
      </div>
      <el-tree
        class="orientation-tree orientation-tree--selected"
        :data="selectTreeData"
        :render-content="renderSelectTree"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "Orientation",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      defalut: false
    },
    checked: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      treeData: [],
      filterText: "",
      defaultCheckedKeys: [],
      selectTreeData: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    data: {
      immediate: true,
      handler(data) {
        this.treeData = this.disabled ? this.setTreeDisabled(data) : data;
      }
    },
    checked: {
      immediate: true,
      handler(val) {
        this.initCheckedTree(val);
      }
    }
  },
  methods: {
    updateSelectTreeChecked(checkedKeys) {
      this.$emit("update:checked", checkedKeys.join());
      this.$emit("change", checkedKeys.join());
    },
    getSelectTreeData(checkedKeys) {
      return this.treeData.filter(item => checkedKeys.includes(item.id));
    },
    handleTreeCheck(current, { checkedKeys }) {
      this.selectTreeData = this.getSelectTreeData(checkedKeys);
      this.updateSelectTreeChecked(checkedKeys);
    },
    handleTreeClear() {
      this.selectTreeData = [];
      this.$refs.tree.setCheckedKeys([]);
      this.updateSelectTreeChecked([]);
    },
    setTreeDisabled(data) {
      data.forEach(item => {
        item.disabled = this.disabled;
      });
      return data;
    },
    initCheckedTree(val) {
      let checkedKeys = val.split(",");
      this.selectTreeData = this.getSelectTreeData(checkedKeys);
      this.defaultCheckedKeys = checkedKeys;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    remove(node, data) {
      let parent = node.parent;
      let children = parent.data.children || parent.data;
      let index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.$refs.tree.setChecked(data.id, false);
    },
    renderSelectTree(h, { node, data }) {
      return (
        <span class="select-tree-node">
          <span>{node.label}</span>
          {!this.disabled ? (
            <el-button
              class="select-tree-node__remove"
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除
            </el-button>
          ) : null}
        </span>
      );
    }
  }
};
</script>

<style lang="scss">
.orientation {
  overflow: hidden;
  .el-tree-node__content {
    height: 30px;
  }
  &-title {
    position: relative;
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px #eee solid;
    &__label {
      font-size: 14px;
      font-weight: 700;
    }
    &__clear {
      position: absolute;
      top: 16px;
      right: 15px;
    }
  }
  &-data,
  &-selected {
    float: left;
    width: 350px;
  }
  &-selected {
    margin-left: 20px;
  }
  &-tree {
    padding: 10px 0;
    height: 200px;
    overflow: auto;
  }
}
.select-tree-node {
  position: relative;
  width: 100%;
  &__remove {
    position: absolute;
    top: 6px;
    right: 15px;
  }
}
</style>